<template>
  <van-popup class="mycard" position="bottom" v-model="show">
    <van-nav-bar title="答题卡">
      <template #right>
        <p>
          <span style="color: red">{{ currentQ }}</span
          >/{{ questionList.length }}题
        </p>
      </template>
    </van-nav-bar>
    <h5>
      共<span>{{ questionList.length }}</span
      >题
    </h5>
    <ul>
      <li
        ref="li"
        @click="changeQ(myindex)"
        :style="{ 'background-color': bgc(item) }"
        :class="myindex === index ? 'current' : ''"
        v-for="(item, myindex) in questionList"
        :key="myindex"
      >
        {{ myindex + 1 }}
      </li>
    </ul>
  </van-popup>
</template>

<script>
export default {
  props: ['questionList', 'index'],
  computed: {
    bgc () {
      return item => {
        if (!item.result) {
          return ''
        }
        if (item.result.isRight) {
          return 'rgba(62, 156, 41, 0.2)'
        } else {
          return 'rgba(240, 128, 128,0.2)'
        }
      }
    }
  },
  data () {
    return {
      show: false,
      currentQ: 1
    }
  },
  methods: {
    changeQ (index) {
      this.show = false
      this.$emit('changeQ', index)
    }
  }
}
</script>

<style lang="less" scoped>
.mycard {
  width: 100%;
  height: 90%;
  h5 {
    height: 50px;
    font-weight: 400;
    font-size: 14px;
    line-height: 50px;
    padding-left: 10px;
    color: rgb(146, 137, 137);
    background-color: rgb(241, 237, 237);
  }
  ul {
    width: 100%;
    padding: 0 20px;
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    li {
      font-size: 16px;
      width: 33px;
      height: 33px;
      color: rgb(122, 116, 116);
      text-align: center;
      line-height: 33px;
      border-radius: 50%;
      border: 1px solid rgb(122, 116, 116);
     margin: 15px;
    }
    li.current {
      border-color: red;
    }
  }
  .right {
    background-color: green;
  }
  .false {
    background-color: pink;
  }
}
</style>
